<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/delivery/resources/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/delivery/resources/raty/lib/jquery.raty.css">
    <script src="/delivery/resources/jquery.3.3.1.min.js"></script>
    <script src="/delivery/resources/bootstrap/bootstrap.min.js"></script>
    <script src="/delivery/resources/raty/lib/jquery.raty.js"></script>
    <script>
        $(function () {
            //测试弹出框
            //$('#exampleModalCenter').modal('show')

            //点击重出验证码
            $('#imgVerifyCode').click(function () {
                reloadVerifyCode();
            })

        })

        //实现验证码图片单击更换
        function reloadVerifyCode() {
            $('#imgVerifyCode').attr("src","verify_code?tp="+new Date().getTime()) //防止浏览器缓存，给它加个时间戳
        }
    </script>
    <style>
        .container {
            padding: 0px;
            margin: 0px;
        }
        .div2{
            background-image: linear-gradient(to right, #0000FF, gray);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
        }
    </style>
</head>
<body>
<#--蓝色边缘模糊图层-->
<div style="height: 100%; background-color:#02B6FD;background: linear-gradient(180deg,#02B6FD,white)">
<div class="container">
    <nav class="navbar navbar-light shadow"style="background-color:#02B6FD;">
        <ul class="nav">
            <li class="nav-item">
                <a href="/delivery/">
                    <img src="/delivery/resources/images/elemo.png" class="mt-1" style="width: 45px;" alt="">
                    <span class="pl-2" style="font-size: 18px;font-weight: bold;margin-top: 3px;color: white">吃了么 美食外卖</span>
                </a>
            </li>
            <li style="padding-left: 100px;padding-top: 10px;">
                <a href="/delivery/" style="color:white;">
                    <span>上一页</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="container" style="width: 80%;margin: 0 auto;padding-top: 10px">
        <form id="frmLogin">
            <div class="passport shadow" style="background-color:#02B6FD;border-radius: 5px;">
                <h4 class="float-left pl-2 pt-2 div2">用户注册</h4>
                <h6 class="float-right pt-2 pr-2 mt-2"><a href="/delivery/login" style="color:white;">用户登录</a></h6>
                <div class="clearfix"></div>
                <div class="alert d-none mt-2" id="tips" role="alert">

                </div>

                <div class="input-group  mt-2 ">
                    <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名">
                </div>

                <div class="input-group  mt-4 ">
                    <input id="password" name="password" class="form-control" placeholder="请输入密码" type="password">
                </div>

                <div class="input-group  mt-4 ">
                    <input type="text" id="nickname" name="nickname" class="form-control" placeholder="请输入昵称">
                </div>

                <div class="input-group mt-4 ">
                    <div class="col-5 p-0">
                        <input type="text" id="verifyCode" name="vc" class="form-control" placeholder="验证码">
                    </div>
                    <div class="col-4 p-0 pl-2 pt-0">
                        <!-- 验证码图片 src="verify_code" src是指定的验证码路径 -->
                        <img id="imgVerifyCode" src="verify_code"
                             style="width: 120px;height:50px;cursor: pointer">
                    </div>

                </div>

                <a id="btnSubmit" class="btn btn-secondary  btn-block mt-4 text-white">注 册</a>
            </div>
        </form>

    </div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" style="width: 80%;margin-left: 40px">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="height: 65px; background-color:#02B6FD;background: linear-gradient(180deg,#9fcdff,white);border:0px">
            <div class="modal-body">
                您已注册成功
                <a href="/delivery/login" type="button" class="btn btn-primary" style="margin-left: 90px;">去登录</a>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
<script>
    $('#btnSubmit').click(function () {
        var username = $.trim($('#username').val());
        var password = $.trim($('#password').val());
        var nickname = $.trim($('#nickname').val());
        var verifyCode = $.trim($('#verifyCode').val());

        var reg=/^.{1,10}$/
        if(!reg.test(username)){
            $('#tips').removeClass("d-none")
            $('#tips').hide();
            $('#tips').addClass("alert-danger");
            $('#tips').text("用户名格式应为(1-10位)");
            $('#tips').fadeIn(300);
            return;
        }else{
            $('#tips').text("");
            $('#tips').fadeOut(300);
            $('#tips').removeClass();
            $('#tips').addClass('alert');
        }
        var password = $.trim($('#password').val());
        //pwd正则处理同上，可以优化。。

        // alert('$.ajax...'+username+","+password+',发送ajax,然后显示注册成功，附个链接去登录')
        /*$.ajax({
            url:'addMember',
            type:'post',
            data:$('#frmLogin').serialize(),
            dataType:'text',
            success:function (res) {
                if(res=="success"){
                    //弹出框   注册成功后，弹出提示和跳转链接
                    $('#exampleModalCenter').modal('show')
                }else{
                    alert("验证码错误！")
                }
            }
        })*/


        $.ajax({
            url:'regist',
            type:'post',
            dataType:'json',
            data:$('#frmLogin').serialize(), //$('#frmLogin').serialize() 序列化取表单数据
            success:function (data) {
                //{"code":0,"msg":""}
                console.log(data);
                if (data.code == 0) {
                    //显示注册成功对话框
                    $('#exampleModalCenter').modal("show")
                }else if(data.msg=="验证码错误"){
                    //如果输入不符合要求，验证码就重新刷新
                    $('#tips').removeClass("d-none")
                    $('#tips').hide();
                    $('#tips').addClass("alert-danger");
                    $('#tips').text("验证码错误");
                    $('#tips').fadeIn(1000);
                    reloadVerifyCode();
                    setTimeout("yx()",3000); //定时器
                }else{
                    //如果输入不符合要求，验证码就重新刷新
                    $('#tips').removeClass("d-none")
                    $('#tips').hide();
                    $('#tips').addClass("alert-danger");
                    $('#tips').text("用户名已存在");
                    $('#tips').fadeIn(1000);
                    reloadVerifyCode();
                    setTimeout("yx()",3000); //定时器
                }
            }
        })


    })
    function yx() {
        $('#tips').text("");
        $('#tips').fadeOut(1000);
        $('#tips').removeClass();
        $('#tips').addClass('alert');
    }
</script>